<template>
  <div>
    <van-nav-bar
        title="全国疫情风险区"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <p v-show="isShow" style="width: 100%;text-align: center"><a-spin size="large"/></p>
    <van-empty description="已超出每日查看次数" v-if="twoOver == '超过每日可允许请求次数!'" v-show="!isShow"/>
    <div v-else v-show="!isShow">
      <van-notice-bar
          left-icon="volume-o"
          :text='"全国中高风险地区查询以上结果仅供参考，可能存在更新迟延或错误，请以有关部门最新官方通知为准：最新更新时间"+yqObj.updated_date+",高风险地区有"+yqObj.high_count+"个,"+"中风险地区有"+yqObj.middle_count+"个,"+"低风险地区有"+yqObj.low_count+"个"'
      />
      <div class="header">
        <p class="top">全国 <span style="float: right">最新更新时间为：{{yqObj.updated_date}}</span></p>
        <ul>
          <li><span style="color: red;font-size: 30px">{{yqObj.high_count}}</span>个<br><a>高风险区</a></li>
          <li><span style="color: yellow;font-size: 30px">{{yqObj.middle_count}}</span>个<br><a>中风险区</a></li>
          <li><span style="color: blue;font-size: 30px">{{yqObj.low_count}}</span>个<br><a>低风险区</a></li>
        </ul>
        <p style="color: gray;width: 90%;margin: 10px auto">全国中高风险地区查询以上结果仅供参考</p>
      </div>
      <van-tabs v-model="activeName" >
        <van-tab title="高风险地区" name="a">
          <p v-show="isShow" style="width: 100%;text-align: center"><a-spin size="large"/></p>
          <ul style="width: 90%;margin: auto" v-show="!isShow">
            <li v-for="item in high" :key="item.communitys[0]" style="padding: 10px 0;color: red;background-color:#ff9999;text-align: center;margin: 10px 0">{{item.area_name}}</li>
          </ul>
        </van-tab>
        <van-tab title="中风险地区" name="b">
          <ul style="width: 90%;margin: auto">
            <li v-for="item in middle" :key="item.communitys[0]" style="padding: 10px 0;background-color:#FFFFF0;color: #FF7F24;text-align: center;margin: 10px 0">{{item.area_name}}</li>
          </ul>
        </van-tab>
        <van-tab title="低风险地区" name="c">
          <ul style="width: 90%;margin: auto">
            <li v-for="item in low" :key="item.area_name" style="padding: 10px 0;background-color:#00ccff;color:#0000ff;text-align: center;margin: 10px 0">{{item.area_name}}</li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {getYQ} from "@/http/api";
export default {
  name: "Epidemic",
  data() {
    return {
      //加载中的显示与隐藏
      isShow:true,
      //每日查看次数上限后
      twoOver:'',
      mrcs:'',
      //疫情数据
      yqObj:{},
      //tab切换显示第几个
      activeName: 'a',
      activeNames: ['1'],
      //高风险
      high:[],
      //中风险
      middle:[],
      // 低风险
      low:[],
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
  },
  created() {
    this.yqObj = this.$store.state.yqObj
    //获取疫情数据
    if(this.yqObj.updated_date == undefined) {
      getYQ('c74397a0201a985760f7e15906f439b5').then(res => {
        if (res.status == 200 && res.data.reason != '超过每日可允许请求次数!') {
          this.yqObj = res.data.result
          this.high = this.yqObj.high_list
          this.low = this.yqObj.low_list
          this.middle = this.yqObj.middle_list
          this.$store.commit('getyqObj',this.yqObj)
          this.isShow = false
        }
        if(res.data.reason == '超过每日可允许请求次数!') {
          getYQ('0fdd47995c28a2b3e5e0b810ef1b9c19').then(res => {
            // console.log(res.status)
            // console.log(res.data.reason)
            if (res.status == 200 && res.data.reason != '超过每日可允许请求次数!') {
              this.yqObj = res.data.result
              this.high = this.yqObj.high_list
              this.low = this.yqObj.low_list
              this.middle = this.yqObj.middle_list
              this.$store.commit('getyqObj',this.yqObj)
              this.isShow = false
            } else {
              this.twoOver = res.data.reason
              this.isShow = false
            }
            // console.log(res.data.reason)
            this.twoOver = res.data.reason

          })
        }
      })
    }else {
      this.isShow = false
      this.high = this.yqObj.high_list
      this.low = this.yqObj.low_list
      this.middle = this.yqObj.middle_list
    }
  },
}
</script>

<style scoped lang="less">
@bgColor:red;
.header {
  padding: 10px 0;
  width: 100%;
  background-color: white;
  margin-bottom: 20px;
  >.top {
    margin: auto;
    padding: 10px 0;
    width: 90%;
    border-bottom:1px solid rgba(0,0,0,.1) ;
    color: black;
    >span {
      color: gray;
    }
  }
  >ul {
    width: 90%;
    margin: auto;
    padding: 20px 0;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.1);
    >li {
      width: 33%;
      text-align: center;
      >a {
        color: black;
      }
    }
  }
}

</style>